<template>
<div>
  <div class="wrapper"  ref="wrapper">
    <div class="main">
      <!-- 头部 -->
      <div class="header" ref="header" >

        <newHeader @toEle='scrollToElement'></newHeader>
        <img class='banner' src="../assets/images/bg-01.jpg" alt="">
      </div>
      <!-- 我们的优势 -->
      <div class="advantage">
        <img src="../assets/images/title-01@2x.png" alt="" class="titleImg">
        <ul>
          <li v-for="(item,index) in advantage" :key="index">
            <img :src="item.imgUrl" alt="">
             <h1>{{ item.privilege }}</h1>
            <p>{{ item.instructions }}</p>

          </li>
        </ul>
        <div class="slogan">
          <img src="../assets/images/slogan.png" alt="">
        </div>

      </div>
      <!-- 我们的学校 -->
      <div id='project' class="project" ref="project">
        <img src="../assets/images/title2.png" alt="" class="titleImg">
        <div class="all">
          <div class="picture">
            <img src="../assets/images/bg-03.png" alt="">
          </div>
          <div class="contains">
            <div>
              <router-link v-for="(item,index) in collegeList" :key="index" :to="{path:'/college', query: {id:item.id, name: item.name ==='COMING SOON!' ? undefined : item.name }}">
                  {{item.name}}
                  <!-- <p>{{  item.china}}</p> -->
              </router-link>
            </div>
          </div>
        </div>
        <div class="toDo" ref='todo'>
          <div>
            <img src="../assets/images/title-03@2x.png" alt="">
             <router-link to="/stuEnroll">
            <!-- <a href="http://140.143.63.54/mba/index.html#/"> -->
              <p>点击进入</p>
            <!-- </a> -->

            </router-link>
          </div>
          <div>
            <img class='img2' src="../assets/images/title-04@2x.png" alt="">
            <router-link to="/additional">
            <!-- <a href="http://140.143.63.54/mba/index.html#/"> -->
              <p>点击进入</p>
            <!-- </a> -->
            </router-link>
          </div>
        </div>
      </div>
      <!-- 公开课 -->
      <div id='public' class="public" ref='public'>
        <img src="../assets/images/title-05@2x.png" alt="" class="titleImg">
        <div class="videoList">
          <div class="item" v-for="(item,index) in videoList" :key="index">
            <div class= 'videoItem'  >
              <video-player  class="vjs-custom-skin"
                      :playsinline="true"
                      :options="videoOption[index]"
                      @play="play($event)"
                      @pause="pause($event)"
              >
              </video-player>
              <div class='videoCover' @click.capture.self='popVideo(index)'>
              </div>
            </div>
          </div>

        </div>

      </div>
      <!-- <newFooter></newFooter> -->

    </div>
</div>
<el-dialog  :visible.sync="dialogVisible"  width="80%"  style="z-index:2002" :close-on-click-modal="false" :before-close="handleClose">
  <video-player class="vjs-custom-skin"
              ref="videoPlayer"
              :options="videoOption[currentIndex]"
              :playsinline="false"
              @play="play($event)"
              @pause="pause($event)"
              @ended="onPlayerEnded($event)"
              @loadeddata="onPlayerLoadeddata($event)"
              @waiting="onPlayerWaiting($event)"
              @playing="onPlayerPlaying($event)"
              @timeupdate="onPlayerTimeupdate($event)"
              @canplay="onPlayerCanplay($event)"
              @canplaythrough="onPlayerCanplaythrough($event)"
              @ready="playerReadied"
              @statechanged="playerStateChanged($event)">
    </video-player>
</el-dialog>
<div class="previewShow" v-if="status===1">
  <el-dialog :visible.sync="previewShow" width="450px">
    <img v-if="picture" :src="picture" class="previewBanner">
    <div class="previewContent">
      <h3 v-if="mainTitle">{{ mainTitle }}</h3>
      <div v-if="subTitle" v-html="subTitle"></div>
      <div class="previewBtn">
        <el-button v-if="buttonText && hasButton===1" style="background:#2d393a;color:#fff" @click="btnTouch">{{ buttonText }}</el-button>
      </div>
    </div>
  </el-dialog>
</div>
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import newFooter from '@/components/newFooter'
import newHeader from '@/components/newHeader'
import { videoPlayer } from 'vue-video-player'
// import BScroll from 'better-scroll'
import { getSchoolResultInfo, diaLog } from '@/api'
import { getToken } from '../api/stuEnrollInfo'
export default {
  name: 'home',
  components: {
    HelloWorld,
    newHeader,
    newFooter
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    },
    videoOption () {
      return this.videoList.map((item) => {
        return Object.assign({}, {
          playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
          autoplay: false, // 如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
          },
          sources: [{
            type: 'video/mp4',
            src: item // url地址
          }]
        })
      })
    }
  },
  data () {
    return {
      collegeList: [],
      dialogVisible: false,
      previewShow: true,
      picture: '',
      mainTitle: '',
      subTitle: '',
      buttonText: '',
      buttonMethod: '',
      btnurl: '',
      hasButton: '',
      status: '',
      videoList: [
        'https://xszx-test-1251987637.cosbj.myqcloud.com/video/one.mp4',
        'https://xszx-test-1251987637.cosbj.myqcloud.com/video/two.mp4',
        'https://xszx-test-1251987637.cosbj.myqcloud.com/video/there.mp4',
        'https://xszx-test-1251987637.cosbj.myqcloud.com/video/four.mp4',
        'https://xszx-test-1251987637.cosbj.myqcloud.com/video/five.mp4',
        'https://xszx-test-1251987637.cosbj.myqcloud.com/video/six.mp4',
        'https://xszx-test-1251987637.cosbj.myqcloud.com/video/seven.mp4',
        'https://xszx-test-1251987637.cosbj.myqcloud.com/video/eight.mp4'
      ],
      currentIndex: 0,
      advantage: [
        {
          imgUrl: 'img/homePage/advantage-01@2x.png',
          instructions: '不用参加国内MBA联考，参加尚德语言课程，可直通入学，获硕士学位。',
          privilege: '免联考'
        }, {
          imgUrl: 'img/homePage/advantage-02@2x.png',
          instructions: '中华人民共和国教育部通过涉外监管信息网（www.jsj.edu.cn）公布的国际正规高等教育大学',
          privilege: '教育局涉外认证'
        }, {
          imgUrl: 'img/homePage/advantage-03@2x.png',
          instructions: '国外大学访学活动 外国大学教授定期来华线下授课 出国参加校园毕业典礼',
          privilege: '国际交流'
        }, {
          imgUrl: 'img/homePage/advantage-04@2x.png',
          instructions: '四大环球俱乐部，最大化激发学员的商业思维，真正实现和商业大咖面对面，增进学员之间的友谊，扩大学员的人脉资源，获得专业的职业生涯规划和指导服务。',
          privilege: '环球俱乐部'
        }
      ],
      project: [
        {
          university: 'Torrens University',
          china: '托伦斯'
        }, {
          university: 'Belhaven University',
          china: '贝瀚文'
        }, {
          university: 'Belhaven University',
          china: '贝瀚文中文项目'
        }, {
          university: 'Belhaven University',
          china: '贝瀚文MBA 1+1出国项目'
        }, {
          university: 'Belhaven University',
          china: '贝瀚文桥梁课MBA 1+1出国'
        }, {
          university: 'Belhaven University',
          china: '国开本海外本硕中文三证'
        }, {
          university: 'Louis University',
          china: '路易斯'
        }, {
          university: 'Herzing University',
          china: '荷晶'
        }, {
          china: '更多 >'
        }
      ]
    }
  },
  async created () {
    const token = await getToken()
    sessionStorage.setItem('token', token.data.data)
    this.token = {
      'token': token.data.data,
      'type': 'h5'
    }
    diaLog().then(res => {
      const info = res.data.info
      this.picture = info.picture
      this.mainTitle = info.mainTitle
      this.subTitle = info.subTitle
      this.buttonText = info.buttonText
      this.buttonMethod = info.buttonMethod
      this.hasButton = info.hasButton
      this.btnurl = info.url
      this.status = info.status
    })
    this.schoolData()
    let preview = localStorage.preview
    if (preview) {
      if ((new Date()).getTime() - Number(preview) > 900000) {
        localStorage.preview = (new Date()).getTime()
        this.previewShow = true
      } else {
        this.previewShow = false
      }
    } else {
      localStorage.preview = (new Date()).getTime()
      this.previewShow = true
    }
  },
  methods: {
    _initScroll () {
      this.listScroll = new BScroll(this.$refs.wrapper, {
        freeScroll: true,
        probeType: 3,
        scrollbar: {
          fade: true,
          interactive: false
        },
        mouseWheel: {
          speed: 20,
          invert: false,
          easeTime: 300
        }
      })
    },
    btnTouch () {
      if (this.buttonMethod === 2) {
        window.open(this.btnurl)
      } else {
        this.previewShow = false
      }
    },
    schoolData () {
      getSchoolResultInfo({ schoolName: '美国贝翰文大学' }).then(res => {
        let collegeList = res.data.map.schoolResultVoList
        // collegeList = [{id: 34, name: "创建院校13变15"},{id: 181, name: "yzc"},{id: 44, name: "金海"}]
        this.collegeList = new Array(9).fill({}).map((item, index) => {
          if (!collegeList[index]) {
            collegeList[index] = {}
            collegeList[index].name = 'COMING SOON!'
          }
          return collegeList[index]
        })
      })
    },
    scrollToElement (el) {
      this.listScroll.scrollToElement(this.$refs[el], 300)
    },
    play (player) {

    },
    pause (player) {
    },
    onPlayerEnded (player) {
      // console.log('player ended!', player)
    },
    onPlayerLoadeddata (player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting (player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying (player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate (player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay (player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough (player) {
      // console.log('player Canplaythrough!', player)
    },
    // or listen state event
    playerStateChanged (playerCurrentState) {
    },
    // player is ready
    playerReadied (player) {
      // seek to 10s
      console.log('example player 1 readied', player)
    },
    popVideo (index) {
      this.currentIndex = index
      this.dialogVisible = true
      // this.listScroll.disable()
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogVisible = false
          this.player.pause()
          done()
        })
        .catch(_ => {})
    }
  },
  mounted () {
    // const token = await getToken()
    // sessionStorage.setItem('token', token.data.data)
    // this.token = {
    //   "token" : token.data.data,
    //   "type": "h5"
    // }
    // this.$nextTick(() => {
    //   this.schoolData()
    // this._initScroll()
    // this.listScroll.disable()
    // })
  }
}
</script>
<style lang="less">
@import url('../style/base');
.flex{
  display: flex;
}
.titleImg{
  width: 603px;
  height: 102px;
  margin: 60px auto;
}
.video-js .vjs-big-play-button{
  height: 2em;
  width: 2em;
  line-height: 2em;
  border-radius: 1em;
}

.main{
  // width: 1920px;
  // width:100%;
  // width:1300px;
  // margin:0 auto;
  .header{
    width: 100%;
    height: 730px;
    margin-bottom: 30px;
    position: relative;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
    img{
      width:100%;
      height: 100%;
    }
    .banner {
      // min-width: 1920px;
      margin-top: -67px;
    }
  }
  .advantage{
    width: 100%;
    text-align: center;
    max-width: 1920px;
    margin: 0 auto;
    ul{
      .flex;
      width:1200px;
      justify-content: center;
      box-sizing: border-box;
      margin: 0 auto 150px;
      li{
        width: 250px;
        height: 270px;
        border: 1px solid #ccc;
        border-radius: 5%;
        box-sizing: border-box;
        text-align: center;
        padding: 23px;
        margin-right: 30px;
        img{
          width: 60px;
          height: 60px;
          margin-bottom: 15px;
        }
        p{
          // .displayCenter;
          height: 120px;
        }
        h1{
          font-weight:bold;
          margin-bottom: 20px;
        }
      }
    }
    .slogan{
     width: 100%;
      height: 532px;
      background: url(../assets/images/bg-02.jpg);
      background-size: 100% 100%;
      background-repeat:no-repeat;
      padding-top: 179px;
      box-sizing: border-box;
      img{
        width: 444px;
        height: 174px;
      }

    }
  }
  .project{
    width: 100%;
    text-align: center;
    margin-bottom:204px;
    .titleImg {
      width: 577px;
    }
    .all{
      .flex;
      width:1200px;
      justify-content: center;
      // box-sizing: border-box;
      margin: 0 auto 150px;
      box-sizing: border-box;
      .picture{
        width: 408px;
        height: 408px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .contains{
        flex: 1;
        margin-left: 39px;
        div{
          .flex;
          flex-wrap: wrap;
          a{
            width: 221px;
            height: 130px;
            background-color: rgba(243, 243, 243, 1);
            border-radius: 5%;
            box-sizing: border-box;
            margin-right: 29px;
            margin-bottom: 24px;
            // padding-top: 39px;
            .displayCenter;
            box-sizing: border-box;
            text-align: center;
            padding: 0 23px;
            color: rgba(0, 0, 0, 1);
          }
          li:hover{
            color: rgba(255, 255, 255, 1);
            background-color:rgba(148, 26, 43, 1) ;
          }
          li:last-child{
            padding-left:0;
            // padding-top: 20px;
            line-height: 40px;
            text-align: center;
            p{
              font-weight: bold;
              font-size: 18px;

            }
          }
        }
      }
    }
    .toDo{
      box-sizing: border-box;
      width:1200px;
      margin: 208px auto 0;
      text-align: center;
      .flex;
      div{
        width: 575px;
        height: 318px;
        background-color: rgba(48, 57, 58, 1);
        box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.5);
        margin-right: 48px;
        padding-top: 45px;
        box-sizing: border-box;
        border-radius: 2%;
        img{
          width: 144px;
          height: 113px;
          margin-bottom: 35px;
        }
        .img2 {
          width:215px;
        }
        p{
          width: 188px;
          height: 42px;
          border-radius: 5%;
          border: 1px solid rgba(255, 255, 255, 1);
          font-size: 14px;
          line-height: 42px;
          margin-left: 193px;
          color: rgba(255, 255, 255, 1);
        }
      }
      div:first-child{
        background-color: rgba(148, 26, 43, 1);
        box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.5);

      }

    }
  }
  .public{
    .titleImg {
      width: 612px;
      height: 116px;
    }
    width: 100%;
    // height: 700px;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom: 30px;
    // background: url(../assets/images/bg-02.png);
    // background-repeat:no-repeat;
    background-size:100%;
    text-align: center;
    .videoList{
      width:1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      // align-content: center;
      // justify-content: space-around;
      .item {
        width: 400px;
        height: 230px;

        .videoItem {
          width: 385px;
          height: 217px;
          box-shadow:#ccc 0px 0px 4px;
          position: relative;
          .videoCover {
          width: 385px;
            height: 217px;
            position: absolute;
            top:0;
          }
        }
      }
    }

  }
}
.previewShow {
  .el-upload {
    text-align: left;
  }
  .previewBanner {
    width: 450px;
  }
  .el-dialog__header {
    padding: 0 !important;
  }
  .el-dialog__body {
    padding: 0;
  }
  .previewContent {
    width: 450px;
    overflow: hidden;
    margin-top: 20px;
  }
  .previewContent h3 {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
  }
  .previewContent div {
    font-size: 14px;
    line-height: 24px;
    padding: 0 20px;
  }
  .previewContent p {
    margin: 0
  }
  .previewBtn {
    width: 100%;
    text-align: center;
    padding: 10px 0!important;
  }
  .previewContent button {
    margin-bottom: 20px;
    font-size: 16px;
  }
  .el-dialog {
    border-radius: 10px;
    overflow: hidden;
  }
}
</style>
